import AvatarImg from "../public/img/avatar.png";
import {useState} from "react";
import {Button, Form, Input, Toast} from "antd-mobile";
import Avatar from "./Avatar";
import {User, userController} from "./http/UserController";
import {useNavigate} from "react-router";

type UserInfoFormProps = User & {sort?: "sign" | "update" | undefined}

const UserInfoForm = (props: UserInfoFormProps) => {

    let action = false;
    if(props.sort && props.sort==="sign") action=true;

    const [avatarSrc, setAvatarSrc] = useState(props.avatar?props.avatar:AvatarImg);
    const [nickname, setNickname] = useState(props.nickname);
    const [account, setAccount] = useState(props.account);
    const [password, setPassword] = useState(props.password);
    const [passwordAgain, setPasswordAgain] = useState(props.password);
    const [phone, setPhone] = useState(props.phone||"");
    const [email, setEmail] = useState(props.email||"");
    const [photo, setPhoto] = useState<File>();

    const navigate = useNavigate();

    const [form] = Form.useForm();

    return(
        <Form layout={"horizontal"} hasFeedback={action}
              footer={<Button type={"submit"} color={"primary"}
                              onClick={()=>{
                                  if (action) signUp();
                                  // TODO: update
                              }}
                              block
              >提交</Button> }
              form={form}
              initialValues={{
                  email: props.email,
                  password: props.password,
                  account: props.account,
                  nickname: props.nickname,
                  phone: props.phone,
                  _password: props.password
              }}
        >
            <Form.Item name={"avatar"} hidden={true}>
                <input type={"file"} id={"avatarChoose"}
                       hidden={true}
                       accept={"image/*"}
                       onChange={event => {
                           const file = event.target.files;
                           if (file) {
                               setAvatarSrc(URL.createObjectURL(file[0]));
                               setPhoto(file[0])
                           }
                       }} value={avatarSrc} />
            </Form.Item>
            <Form.Item label={"头像"}>
                <Avatar radius={40} src={avatarSrc} onClick={()=>{
                    const ele = document.getElementById("avatarChoose");
                    if(ele) ele.click();
                }}/>
            </Form.Item>
            <Form.Item name={"nickname"}
                       label={"昵称"} required
            >
                <Input value={nickname} onChange={setNickname} />
            </Form.Item>
            <Form.Item name={"account"}
                       label={"账号"} required
                       rules={[{
                           pattern: new RegExp("[0-9a-zA-Z]{10,15}"),
                           message: "请输入只包含数字或英文的10到15位账号"
                       }]}
            >
                <Input value={account} onChange={setAccount} />
            </Form.Item>
            <Form.Item name={"password"}
                       label={"密码"} required
            >
                <Input value={password} onChange={setPassword} type={"password"} />
            </Form.Item>
            <Form.Item name={"_password"}
                       label={"重复密码"}
                       rules={[{pattern: password?new RegExp(password):RegExp(""), message: "密码输入不一致"}]}
                       required
            >
                <Input value={passwordAgain} onChange={setPasswordAgain} type={"password"} />
            </Form.Item>
            <Form.Item name={"phone"}
                       label={"电话"}
            >
                <Input value={phone} onChange={setPhone} type={"tel"} />
            </Form.Item>
            <Form.Item name={"email"}
                       label={"邮箱"}
            >
                <Input value={email} onChange={setEmail} type={"email"} />
            </Form.Item>
        </Form>
    );

    function signUp() {
        const kv = form.getFieldsValue();
        form.validateFields();
        if (kv["password"]===kv["_password"]){

            userController.register({...kv, photo})
                .then(res=>{
                    navigate("/me");
                }).catch(err=>{
                alert("注册失败，请稍后重试。");
            })
        }else {
            Toast.show("两次输入密码不一致")
        }
    }

}

export default UserInfoForm;
